<script setup>
import { ref, reactive, getCurrentInstance, onMounted, h, computed  } from "vue";
import { goRouter } from "@/utils";

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this

let propsData = defineProps({
  list: {
    type: Array,
    required: true
  },
  defaultActive: {
    type: Array,
    default: []
  },
  onIconTypeClick: {
    type: Function,
    default: () => {}
  }
});
// 组件中使用，接收事件的
const emits = defineEmits(['iconTypeClick', 'changeTypeArr']);

const activeData = ref(propsData.defaultActive);

let activeShow = function(id) {
  return activeData.value.some(i => i == id);
};

function screenActive(item, arr = []){
  if (arr.length) {
    activeData.value = arr;
  }else{
    if (activeShow(item.id)) {
      activeData.value = activeData.value.filter(i => i != item.id);
    }else{
      item?.id && activeData.value.push(item.id);
    }
    item?.id && emits('changeTypeArr', activeData.value);
  }
};

function itemClick(item){
  screenActive(item);
  emits('iconTypeClick', item);
}

defineExpose({ screenActive })

</script>
<template>
<div class="icon_type">
  <div v-for="item in list" :key="item.id" :class="activeShow(item.id) ? 'icon_type_item' : 'icon_type_item not_image'" @click="itemClick(item)">
    <div class="image">
      <span class="img_box_shown" v-if="activeShow(item.id)"></span>
      <img :src="item.activeImage" v-if="activeShow(item.id)" alt="">
      <img :src="item.notImage" v-else alt="">
    </div>
    <div class="icon_type_text">
      <span>{{ item.value }}</span>
      <span>{{ item.label }}</span>
    </div>
  </div>
</div>
</template>
<style lang="less" scoped>
.icon_type{
  position: absolute;
  left: 30px;
  top: 30px;
  z-index: 100;
  .not_image{
    .icon_type_text{
      span:nth-child(1){
        color: #666 !important;
      }
      span:nth-child(2){
        color: #666 !important;
      }
    }
  }
  .icon_type_item{
    display: flex;
    flex-direction: row;
    cursor: pointer;
    .icon_type_text{
      width: 160px;
      span{
        display: block;
        user-select: none;
      }
      span:nth-child(1){
        font-size: 26px;
        color: #fff;
      }
      span:nth-child(2){
        font-size: 14px;
        color: #BEBEBE;
      }
    }
    .image{
      width: 62px;
      height: 70px;
      margin-right: 15px;
      position: relative;
      .img_box_shown{
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        box-shadow: 0 0 60px 18px #9dafff;
        display: block;
        width: 1px;
        height: 1px;
        border-radius: 999999px;
      }
      img{
        width: 100%;
        height: 100%;
      }
    }
  }
}
</style>